<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>单据查询</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="../../css/font.css">
    <link rel="stylesheet" href="../../css/xadmin.css">
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <script src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/xadmin.js"></script>

</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>

            <a>
              <cite>单据查询 / Documents</cite></a>
          </span>
                        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
                           onclick="location.reload()" title="刷新">
                            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
                    </div>
                    </br>
                    <form class="layui-form layui-col-space5">
                        <label class="layui-form-label">日期范围</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="time" id="test6" placeholder=" 请选择日期范围 ">
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" name="p_name" required lay-verify="p_name" placeholder="请输入患者姓名"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" name="registration_number" required lay-verify="registration_number"
                                   placeholder="请输入挂号单号"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <a class="layui-btn" lay-submit="" lay-filter="searche_btn" id="searche_btn"><i
                                    class="layui-icon">&#xe615;</i>
                            </a>
                        </div>
                    </form>
                </div>

                <div class="layui-card-body layui-table-body layui-table-main">
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                </div>

            </div>
        </div>
    </div>
</div>
</div>
</div>

</body>
</html>

<script>

    //监听提交
    $("#searche_btn").click(function () {
        loadpage();
    });

    $(function () {
        loadpage();
    })

    function loadpage() {

        params = {
            "p_name": $("[name='p_name']").val(), "time": $("[name='time']").val(),
            "registration_number": $("[name='registration_number']").val()
        };
        renderdata(params);
    }

    function useAjax(url, type, dataType, data, $success) {
        var load; //加载等待图标的组件
        $.ajax({
            url: url,
            type: type,
            data: data,
            dataType: dataType,
            before: function () {
                load = layer.load();
            },
            success: $success,
            complete: function () {
                layer.close(load);
            },
            error: function (jqxhr) {
                layer.msg(jqxhr.status);
            }
        });
    }

    function renderdata(param) {
        useAjax("/JT90/getDocunmetlist", "get", "json", param, function (res) {
            var data = res.result;

            render(data);
        })
    }

    function render(data) {
        layui.use(['table', 'laydate', 'layer', 'form', 'laypage'], function () {
            var table = layui.table,
                layer = layui.layer,
                form = layui.form,
                laypage = layui.laypage;
            laydate = layui.laydate;
            //日期范围
            laydate.render({
                elem: '#test6'
                , range: true
            });
            table.render({
                elem: '#test'
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , data: data
                , title: '订单列表'
                , cols: [[
                    {field: 'registration_number',  title: '挂号单号', align: "center"}
                    , {field: 'p_name', title: '姓名', align: "center"}
                    , {field: 'p_gender', title: '性别', align: "center"}
                    , {field: 'p_age',  title: '年龄', align: "center"}
                    , {field: 'p_phone', title: '电话', align: "center"}
                    , {field: 'pre_money', title: '费用总额(元)', align: "center", style: "color:red;"}
                    , {field: 'pre_open_date', title: '开方时间', align: "center"}
                    , {field: 'r_time',  title: '结算时间', align: "center"}
                    , {field: 'u_doctor_name',  title: '医生名字', align: "center"}
                    , {field: 'dictionary_data', templet:setSate, title: '缴费状态', align: "center"}
                ]]
                , response: {
                    dataName: 'result' //规定数据列表的字段名称，默认：data   表示这是要解析的参数
                }
                , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] //自定义分页布局
                    , groups: 5 //只显示 1 个连续页码
                    , first: false //不显示首页
                    , last: false //不显示尾页
                    , limit: 5
                    , limits: [5, 10, 15, 20]
                    , theme: '#44cc33'
                }

            });
        })
    }

    // 缴费和未交费颜色状态
    function setSate(data){
        var dictionary_data=data.dictionary_data;
        if(dictionary_data=="已缴费"){
            return"<span style='color:green;'>已缴费</span>";
        }else {
            return"<span style='color:#40AFFE;'>未缴费</span>";
        }
    }






</script>

